<template>
	<div class="admin">
		<h2>管理员配置</h2>
		<el-button
			class="add-admin"
			type="primary"
			icon="el-icon-circle-plus-outline"
			size="small"
			@click="addModel=true"
		>
			添加管理员
		</el-button>
		<div class="table-container">
			<el-table
				:data="admins"
				style="width: 100%;"
			>
				<el-table-column
					prop="id"
					label="用户ID"
				/>
				<el-table-column
					prop="trueName"
					label="成员名称"
				/>
				<el-table-column
					prop="phone"
					label="手机号"
				/>
				<el-table-column
					v-for="item in ROLES"
					:key="item.key"
					prop="specialtyTags"
					align="center"
				>
					<template slot="header">
						{{item.label}}
						<el-tooltip
							style=" cursor: pointer;"
							:content="item.desc"
							placement="bottom"
						>
							<Iconfont
								type=""
								name="el-icon-question"
							/>
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<el-checkbox
							:disabled="item.disabled"
							:value="true"
							@change="onclickSetRole(scope.row)"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					width="90"
				>
					<template slot-scope="scope">
						<el-button
							type="danger"
							size="mini"
							:disabled="myUserId === scope.row.id"
							@click="onclickDel(scope.row.id)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页组件 -->
		<div class="pagination">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="pageSize"
				:total="total"
				:current-page="pageNum"
				@current-change="loadAdmins"
			/>
		</div>

		<AddModel
			v-if="addModel"
			@close="addModel=false"
			@finish="loadAdmins(1)"
		/>
	</div>
</template>

<script>
import { getAdminInfo, deleteAdmin } from '@/entry/admin/api/admin.js'
import ROLES from '@admin/constants/roles'
import AddModel from './components/AddModel'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Admin',
    }
  },
  components: {
    AddModel
  },
  data() {
    return {
      ROLES,
      admins: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      myUserId: this.$rootApp.getMyInfo().userInfo.userId,
      addModel: false,
    }
  },
  created() {
    this.loadAdmins(1)
  },
  methods: {
    /**
		 * 获取管理员列表
		 */
    async loadAdmins(pageNum = this.pageNum) {
      try {
        this.$loading()
        const res = await getAdminInfo({
          pageNum,
          pageSize: this.pageSize
        })

        this.admins = res.data.pageData
        this.total = res.data.total
        this.pageNum = pageNum
        console.log(this.admins[ 0 ])
      } catch (err) { err }
      this.$hideLoading()
    },
    /**
		 * 点击权限设置
		 */
    onclickSetRole(user) {
      console.log(user)
    },
    /**
		 * 点击删除管理员
		 * @param {Number} userId
		 */
    onclickDel(userId) {
      this.$confirm('确认删除该成员吗？', async() => {
        await deleteAdmin(userId)
        this.$success('删除成功')
        this.loadAdmins(1)
      })
    }
  }
}
</script>

<style lang="scss" scope>
.admin {
  padding: 10px 20px;

  h2 {
    display: inline-block;
    padding-right: 20px;
    color: $blue;
  }

  .add-admin {
    float: right;
  }

  .pagination {
    float: right;
    margin-top: 10px;
  }
}
</style>
